(function (Vue) {
    Vue.component("home", {
      template: `
          <h1>主页组件</h1>
          `,
    });
    Vue.component("product", {
      template: `
          <h1>产品组件</h1>
          `,
    });
    Vue.component("profile", {
      template: `
          <h1>公司介绍组件</h1>
          `,
    });
    let routes = [
      {
        path: "/home",
        component: "home",
      },
      {
        path: "/product",
        component: "product",
      },
      {
        path: "/profile",
        component: "profile",
      }
    ];
    // 添加 hash change 监听事件
    window.addEventListener("hashchange", function (e) {
      // console.log(e);
      console.log(window.location.hash);
      let path = window.location.hash.split("#")[1];// /product /profile /home
      // 寻找路由对应的配置项
      let route_item = routes.find(v=>{
          if(v.path === path){
              return true;
          }
      })
      console.log(route_item);
      console.log(vm.componentId);
      vm.componentId = route_item.component;
    });
  })(Vue);
  